<template>
  <a-card :bordered="false" class="card-area">
    <div>
      <div class="operator">
        <div class="table_tile"><span></span>下拉字典管理</div>
      </div>
      <!-- 表格区域 -->
      <a-table ref="TableInfo" :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading">
        <template slot="remark" slot-scope="text, record">
          <a-popover placement="topLeft">
            <template slot="content">
              <div style="max-width: 200px">{{ text }}</div>
            </template>
            <p style="width: 200px;margin-bottom: 0">{{ text }}</p>
          </a-popover>
        </template>
        <template slot="operation" slot-scope="text, record">
          <icon-font
            v-hasPermission="'dict:update'"
            type="iconchakan"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            @click="edit(record)"
            title="查看字典"
          />
          <a-badge v-hasNoPermission="'dict:update'" status="warning" text="无权限"></a-badge>
        </template>
      </a-table>
    </div>
    <select-edit
      :dictData="dictEdit.data"
      @close="handleDictEditClose"
      @success="handleDictEditSuccess"
      :dictEditVisiable="dictEdit.visiable"
    >
    </select-edit>
  </a-card>
</template>

<script>
import SelectEdit from './SelectEdit';

export default {
  name: 'Select',
  components: { SelectEdit },
  data() {
    return {
      advanced: false,
      dataSource: [],
      loading: false,
      dictEdit: {
        visiable: false
      }
    };
  },
  computed: {
    columns() {
      return [
        {
          title: '名称',
          dataIndex: 'dictName',
          key: 'dictName',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ];
    }
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleDictEditSuccess() {
      this.dictEdit.visiable = false;
      this.$message.success('修改字典成功');
      this.search();
    },
    handleDictEditClose() {
      this.dictEdit.visiable = false;
    },
    edit(record) {
      this.dictEdit.data = record;
      this.dictEdit.visiable = true;
    },
    fetch(params = {}) {
      this.loading = true;
      params.dictType = 1;
      this.$get('dict', {
        ...params
      }).then(r => {
        let data = r.data;
        this.loading = false;
        this.dataSource = data.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../../../static/less/Common';
</style>
